<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>统计报表</title>
    <script type="application/javascript" th:src="@{/js/echarts.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="display: flex">
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;"></div>
</div>
<div style="display: flex">
    <div id="main3" style="width: 600px;height:400px;"></div>
    <div id="main4" style="width: 600px;height:400px;"></div>
</div>
<div id="main5" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    function sortDownDate(a, b) {
        Date.parse(a.received) - Date.parse(b.received);
    }

    $(function () {
        $.get('/admin/tongjiData', function (data) {
            let label = Object.keys(data.data)
            let labelData = Object.values(data.data)

            let labelAndDataArr = []
            for (let i = 0; i < label.length; i++) {
                let labelAndData = {}
                labelAndData['name'] = label[i]
                labelAndData['value'] = labelData[i]
                labelAndDataArr.push(labelAndData)

            }
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '电影分类及数量'
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                xAxis: {
                    data: label
                },
                yAxis: {},
                series: [{
                    name: '次数',
                    type: 'bar',
                    data: labelData
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            // 绘制图表。
            echarts.init(document.getElementById('main2')).setOption({
                title: {text: '电影分类占比'},
                series: {
                    type: 'pie',
                    data: labelAndDataArr
                }
            });
        })
        $.get('/admin/tongjiData2', function (data) {
            let labelData = Object.values(data.data)
            let label = Object.keys(data.data)
            // 绘制图表。
            echarts.init(document.getElementById('main3')).setOption({
                title: {
                    text: '电影前观看次数前10'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: label,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        //  name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: labelData
                    }
                ]
            });
        })

        $.get('/admin/tongjiData3', function (data) {
            let labelData = Object.values(data.data)
            let label = Object.keys(data.data)
            var dataAxis = label
            var data = labelData
            var yMax = Math.max(labelData);
            var dataShadow = [];

            for (var i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }
            echarts.init(document.getElementById('main4')).setOption({

                title: {
                    text: '电影收藏多次数前10',
                    subtext: ''
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    { // For shadow
                        type: 'bar',
                        itemStyle: {
                            color: 'rgba(0,0,0,0.05)'
                        },
                        barGap: '-100%',
                        barCategoryGap: '40%',
                        data: dataShadow,
                        animation: false
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        },
                        data: data
                    }
                ]

            })
        })
        $.get('/admin/tongjiData4', function (data) {
// 自定义排序规则，按对象的id排序


            let labelData = Object.values(data.data)
            let label = Object.keys(data.data)
            let labelAndDataArr = []
            for (let i = 0; i < label.length; i++) {
                let labelAndData = {}
                labelAndData['name'] = label[i]
                labelAndData['value'] = labelData[i]
                labelAndDataArr.push(labelAndData)

            }
            // var sortedObjKeys = Object.keys(labelAndDataArr).sort(function(a, b) {
            //     return labelAndDataArr[b].name - labelAndDataArr[a].name;
            // });
            // labelAndDataArr2=[]
            // for (var index in sortedObjKeys) {
            //     labelAndDataArr2.push(labelAndDataArr[sortedObjKeys[index]])
            //     console.log(labelAndDataArr[sortedObjKeys[index]]);
            //     console.log('----------');
            // }
            //
            //
            // let labelAndDataArr3 = []
            // for (let i = 0; i < labelAndDataArr2.length; i++) {
            //     let labelAndData = {}
            //     labelAndData['name'] = labelAndDataArr2[i]['name']
            //     labelAndData['value'] = labelAndDataArr2[i]['value']
            //     labelAndDataArr3.push(labelAndData)
            //
            // }
            // 绘制图表。
            echarts.init(document.getElementById('main5')).setOption({
                title: {
                    text: '视频发布曲线'
                },
                color: ['#3398DB'],
                xAxis: {
                    type: 'category',
                    data: label
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data:  labelData,
                    type: 'line'
                }]
            });
        })
    })
</script>
</body>
</html>